<template>
  <div class="p-6">
    <el-card shadow="never" class="rounded-lg">
      <el-table :data="tableData" border :span-method="spanMethod" :cell-class-name="cellClass">
        <el-table-column label="序号" type="index" width="70" align="center" />
        <el-table-column label="风险分析对象" prop="object" min-width="140" />
        <el-table-column label="风险分析单元" prop="unit" min-width="140" />
        <el-table-column label="责任部门" prop="dept" min-width="120" />
        <el-table-column label="责任人" prop="owner" min-width="120" />
        <el-table-column label="风险事件" prop="event" min-width="160" />
        <!-- 管控措施分类（跨3列） -->
        <el-table-column label="管控措施分类" prop="category" min-width="180" />
        <el-table-column label="" prop="category_pad1" min-width="1" />
        <el-table-column label="" prop="category_pad2" min-width="1" />
        <el-table-column label="管控措施" prop="measure" min-width="200" />
        <el-table-column label="隐患排查内容" prop="inspect" min-width="200" />
        <el-table-column label="岗位负责人" prop="postOwner" min-width="120" />
        <!-- 周期（跨两列） -->
        <el-table-column label="周期" prop="period" min-width="140" />
        <el-table-column label="" prop="period_pad" min-width="1" />
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface RiskRow {
  object: string
  unit: string
  dept: string
  owner: string
  event: string
  category: string
  category_pad1?: string
  category_pad2?: string
  measure: string
  inspect: string
  postOwner: string
  period: string
  period_pad?: string
}

const tableData = ref<RiskRow[]>([])

const mockInit = () => {
  const objs = ['反应装置', '储罐区', '泵区', '管廊', '换热站']
  const units = ['反应釜', '储罐A', '循环泵', '主干管线', '板式换热器']
  const depts = ['生产部门', '设备部', '安环部', '工艺部']
  const owners = ['王伟', '李娜', '张敏', '刘洋', '陈杰', '杨静', '黄磊', '周玲', '吴涛', '赵敏']
  const events = ['泄漏', '超压', '高温', '腐蚀', '振动']
  const cats = ['工程技术', '管理措施', '个体防护']
  const measures = ['更换密封垫', '设置安全阀', '增加巡检频率', '上锁挂牌', '防腐涂层']
  const inspects = ['检查法兰渗漏', '检查阀门灵活性', '检查温度压力表', '检查支吊架', '检查腐蚀点']
  const periods = ['每周', '每月', '季度', '半年', '年度']
  const list: RiskRow[] = []
  const n = 16 // 固定条数
  for (let i = 0; i < n; i++) {
    list.push({
      object: objs[i % objs.length],
      unit: units[i % units.length],
      dept: depts[i % depts.length],
      owner: owners[i % owners.length],
      event: events[i % events.length],
      category: cats[i % cats.length],
      measure: measures[i % measures.length],
      inspect: inspects[i % inspects.length],
      postOwner: owners[(i + 1) % owners.length],
      period: periods[i % periods.length],
    })
  }
  tableData.value = list
}

const spanMethod = ({ column }: any) => {
  // merge category to 3 cols, period to 2 cols
  if (column.property === 'category') return { rowspan: 1, colspan: 3 }
  if (column.property === 'category_pad1' || column.property === 'category_pad2') return { rowspan: 0, colspan: 0 }
  if (column.property === 'period') return { rowspan: 1, colspan: 2 }
  if (column.property === 'period_pad') return { rowspan: 0, colspan: 0 }
}

const cellClass = ({ column }: any) => {
  if (column.property === 'category' || column.property === 'period') return 'colspan-cell'
  return ''
}

onMounted(() => mockInit())
</script>
